﻿@{
    ViewData["Title"] = "Home Page";
    var books = ViewData["books"] as List<Book>;
}

@if (books == null || books.Count == 0)
{
    <style>
        
    </style>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card"  style="margin-top: 200px;">
                <div class="card-body text-center">
                    <h1 class="card-title">查询结果为空</h1>
                    <p class="card-text">很抱歉，没有找到与您的查询相关的书籍。</p>
                </div>
            </div>
        </div>
    </div>
}
else
{
    <style>
        .flex_content{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .flex_content > div{
            margin: 15px 30px;
            flex-basis: 220px;
            flex-grow: 0;
            flex-shrink: 0;
        }
    </style>
    
    <div class="flex_content">
        @foreach (var book in books)
        {
            <div class="card" style="width: 18rem;">
                <img src="~/@book.CoverImage" class="card-img-top" alt="...">
                <div class="card-body">
                    <h6 class="card-title">@book.Title</h6>
                    <p class="card-text">@book.Author</p>
                    <a class="btn btn-primary" asp-controller="Book" asp-action="BookReader" asp-route-bookId="@book.Id">去阅读</a>
                </div>
            </div>
        }
    </div>
}
